<template>
  <div class="content">
    <div class="scroll-view-box" v-loading="submitBtn">
      <div class="user-title-box">基础信息</div>
      <el-form label-width="120px" :inline="true" :model="addForm" :rules="addRules" ref="addRules"
        label-position="top">
        <el-form-item label="项目名称" prop="project_id">
          <el-select filterable v-model="addForm.project_id" placeholder="选择项目名称" clearable class="input-width">
            <el-option v-for="item in projectList" :key="item.id" :label="item.project_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限期整改日期" prop="deadline_rectification">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="addForm.deadline_rectification"
            type="date" clearable placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否影响开业" prop="is_affect_opening">
          <el-radio-group v-model="addForm.is_affect_opening">
            <el-radio :label="1">影响</el-radio>
            <el-radio :label="2">不影响</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="user-title-box">整改内容</div>
        <div class="size-box" v-for="(item, index) in addForm.change_arr" :key="index">
          <p class="size-box-title">整改{{ index + 1 }}
            <span class="del-btn" @click="delSpecsFunc(index)">删除</span>
          </p>
          <div class="size-box-content">
            <el-form-item label="整改区域" :prop="'change_arr.' + index + '.rectification_area'" :rules="[
              { required: true, message: '请选择整改区域', trigger: 'change' },
            ]">
              <el-select filterable v-model="item.rectification_area" placeholder="选择整改区域" clearable class="input-width">
                <el-option label="前区" :value="1"></el-option>
                <el-option label="后区" :value="2"></el-option>
                <el-option label="仓库" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="整改类型" :prop="'change_arr.' + index + '.rectification_type'" :rules="[
              { required: true, message: '请选择整改类型', trigger: 'change' },
            ]">
              <el-select filterable v-model="item.rectification_type" placeholder="选择整改类型" clearable class="input-width">
                <el-option label="水电" :value="1"></el-option>
                <el-option label="吊顶" :value="2"></el-option>
                <el-option label="门头" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片" :prop="'change_arr.' + index + '.rectification_file'" :rules="[
              { required: true, validator: fileVoucher, trigger: 'change' },
            ]">
              <div class="file-list-box">
                <el-upload accept="image/*" multiple class="avatar-uploader" action="#" :show-file-list="false"
                  :auto-upload="false" list-type="picture-card" :on-change="(file, fileList) => {
                    changeFile(file, fileList, index);
                  }
                    ">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="file-item-box" v-for="(file, cIndex) in item.rectification_file" :key="cIndex">
                  <div class="el-icon-delete-box" @click="delFileFunc(index, cIndex)">
                    <i class="el-icon-error"></i>
                  </div>
                  <el-tooltip class="item" effect="dark" :content="file.name" placement="top">
                    <img class="img" :src="$fileImgFunc(file)" />
                  </el-tooltip>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="整改内容" :prop="'change_arr.' + index + '.rectification_content'" :rules="[
              { required: true, message: '请输入整改内容', trigger: 'change' },
            ]">
              <el-input v-model="item.rectification_content" placeholder="输入整改内容" clearable class="input-width">
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSpecsFunc" :loading="submitBtn">新增整改</el-button>
        <el-button type="primary" @click="saveSubmit('addRules')" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import common from '@/api/common';
import rectificationApi from '@/api/rectificationApi';

export default {
  name:'addRectificationForm',
  data() {
    return {
      fileVoucher: function (rule, value, callback) {
        if (!value.length) {
          callback(new Error("请上传图片"));
        } else {
          callback();
        }
      },
      value: 1,
      addForm: {
        project_id: "",
        is_affect_opening: 1,
        deadline_rectification: '',
        change_arr: [{
          rectification_content: '',
          rectification_area: '',
          rectification_type: '',
          rectification_file: [],
        }]
      },
      addRules: {
        project_id: [
          {
            required: true,
            message: "请选择项目",
            trigger: "change",
          },
        ],
        deadline_rectification: [
          {
            required: true,
            message: "请选择限期整改时间",
            trigger: "change",
          },
        ],
        is_affect_opening: [
          {
            required: true,
            message: "请选择是否影响开业",
            trigger: "change",
          },
        ],
      },
      submitBtn: false,
      projectList: [],//项目列表
    };
  },
  computed: {},
  mounted() {
    this.selectProjectList();
  },
  methods: {
    // 项目列表
    selectProjectList() {
      common.selectProjectList({
        construction_status_arr: [45]
      }).then(res => {
        console.log(res, '项目列表')
        if (res.code == 200) {
          this.projectList = res.data;
        }
      })
    },
    // -----------------------文件选择--------------------------
    changeFile(file, list, index) {
      this.addForm.change_arr[index].rectification_file.push(file);
    },
    // -----------------------文件删除--------------------------
    delFileFunc(index, child) {
      this.addForm.change_arr[index].rectification_file.splice(child, 1);
    },
    // 删除整改内容
    delSpecsFunc(index) {
      if (this.addForm.change_arr.length == 1) {
        this.$message({
          type: 'warning',
          message: "至少需要有一项整改内容"
        })
        return;
      }
      this.addForm.change_arr.splice(index, 1);
    },
    // 添加整改内容
    addSpecsFunc() {
      this.addForm.change_arr.push({
						rectification_content: '',
						rectification_area: '',
						rectification_type: '',
						rectification_file: []
      })
    },
    // 提交
    saveSubmit(formName) {
      let addForm = this.addForm;
      console.log(addForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let ajaxNum = 0;//添加数
          let isErr = false;
          this.submitBtn = true;
          addForm.change_arr.forEach(item => {
            if (isErr) return;
            let formdata = new FormData();
            formdata.append('data', JSON.stringify({
              project_id: addForm.project_id,
              is_affect_opening: addForm.is_affect_opening,
              deadline_rectification: addForm.deadline_rectification,
              rectification_content: item.rectification_content,
              rectification_area: item.rectification_area,
              rectification_type: item.rectification_type,
            }))
            // 文件
            item.rectification_file.forEach(i => {
              console.log(i.raw);
              formdata.append('rectification_file[]', i.raw);
            })
            this.addRectification(formdata, (res) => {
              isErr = res.code != 200;
              ajaxNum += 1;
              // 判断所有都提交完成（提示完毕返回列表）
              if (ajaxNum == addForm.change_arr.length) {
                this.$message({
                  type: res.code == 200 ? 'success' : 'warning',
                  message: res.message
                })
                this.submitBtn = false;
                res.code == 200 ? this.cancelFunc() : '';
              }
            });
          })
        } else {
          return false;
        }
      });
    },
    // 发起整改单请求
    addRectification(obj, cb) {
      rectificationApi.addRectification(obj).then(res => {
        console.log(res, "新曾整改单")
        cb && cb(res)
      })
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>